<template>
  <div
    class="backTop"
    v-show="gotop"
    @click="handleScrollTop"
  >
    <div class="back"></div>
  </div>
</template>


<script>
  export default {
    name:'backTop',
    props:['ele'],
    data(){
      return {
        gotop:false,
        scrollHeight:100
      }
    },
    created(){

    },
    mounted(){
      // 此处true需要加上，不加滚动事件可能绑定不成功
      window.addEventListener("scroll", this.handleScroll, true);
    },
    methods:{
      handleScroll(e) {
        let scrolltop = e.target.scrollTop;
        scrolltop > this.scrollHeight ? (this.gotop = true) : (this.gotop = false);
      },

      handleScrollTop() {
        this.$nextTick(()=>{
          let page = $(this.ele).find('.page-view')[0];
          // page.scrollTop = 0;
          $(page).animate({scrollTop:0}, 'fast');
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .backTop{
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 10;
    cursor: pointer;
    opacity: 0.3;
    border-radius: 50%;
    transition: all .3s;
    .back{
      background: url('../../assets/backTop.png') no-repeat;
      background-position: center;
      background-size: 16px;
      background-color: #409eff;
      width: 40px;
      height: 40px;
      overflow: hidden;
      color: #fff;
      text-align: center;
      border-radius: 50%;
      transition: all .3s;
      box-shadow: 0 0 15px 1px rgba(69,65,78,.1)
    }
  }
  .backTop:hover {
    opacity: 1;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transform: scale(1.1);
}


</style>
